<template>
	<view class="qun">
		<view class="name">
			取消授权
		</view>
		<view class="desc">
			取消授权后，该抖音账号将无法继续产生收益！请谨慎操作！
		</view>
		<view class="desc resontit">
			取消原因（必填）
		</view>
		
		<view class="detail">
			<u-input  placeholder="请输入取消抖音账号授权原因"  height="100" border-color="#DBDBDB" v-model="reason" type="textarea" :border="true" />
			
		</view>
		<view @click="cancel" class="btns">
			取消授权
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				reason:''
			}
		},
		methods: {
			cancel(){
				if(!this.reason){
					this.$u.toast('请输入取消抖音账号授权原因'); 
					return
				}
				this.$emit('closeMask')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.qun {
		width: 600rpx;
		background: #FFFCFA;
		border-radius: 29rpx 29rpx 29rpx 29rpx;
		opacity: 1;
		border: 1rpx solid #FFFFFF;
		padding-bottom: 41rpx;

		.name {
			margin-top: 56rpx;
			font-size: 36rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-bottom: 20rpx;
			text-align: center;
		}
		.detail{
			margin:0 32rpx;
		}

		.desc {
			padding:0 32rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 33rpx;
			text-align: left;
			&.resontit{
				margin: 50rpx 0 10rpx 0;
			}
		}

	

		.btns {


			width: 208rpx;
			height: 71rpx;
			background: #3757FF;
			border-radius: 41rpx 41rpx 41rpx 41rpx;
			color: #f6f4ff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 55rpx auto 0 auto;

		}

	}
</style>
